<template>
	<view class="yc-data-checkbox hhgg">
		<view class="checkbox">
			<view class="box"><!-- 胜平负 -->
				<view class="box" v-if="noshowgame('HAD')">
					<view class="check" v-for="item,index in styledata.spf.res" :key="index"
					:style="styledata.spf.style[index]==0?'':' background-color: red; color: #fff;'" @click="change('spf',index,'HAD')">
						<view class="huadan">
							<view :class="noshowdan('HAD')?'inner-box1':''">
								<text v-show="noshowdan('HAD')" style="transform: scale(0.8);">单</text>
							</view>
							<view style="display: flex;flex-direction: row;align-items: center;">
								<text style="font-weight: bold;align-self:center;font-size:28rpx;">{{item}}</text>
								<text style="margin-left: 5px;align-self:center;font-size:26rpx;">
									{{fixSelectData['HAD'][styledata.spf.keyArr[index]]}}
								</text>
								<text v-if="fixSelectData['HAD'][styledata.spf.keyArr[index]+'F']!=0" :style="fixSelectData['HAD'][styledata.spf.keyArr[index]+'F']>0?'color:red;':'color:green;'">
									{{fixSelectData['HAD'][styledata.spf.keyArr[index]+'F']>0?'↑':'↓'}}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="check" style="flex: 1;">
					<view style="color: #999999;">未开售</view>
				</view>
			</view>
			<!-- 让球胜平负 -->
			<view class="box">
				<view class="box" v-if="noshowgame('HHAD')">
					<view class="check" v-for="item,index in styledata.rq.res" :key="index"
					:style="styledata.rq.style[index]==0?'':' background-color: red; color: #fff;'" @click="change('rq',index,'HHAD')">
						<view class="huadan">
							<view :class="noshowdan('HHAD')?'inner-box1':''">
								<text v-show="noshowdan('HHAD')" style="transform: scale(0.8);">单</text>
							</view>
							<view style="display: flex;flex-direction: row;">
								<text style="font-weight: bold;align-self:center;font-size:28rpx;">{{item}}</text>
								<text style="margin-left: 5px;align-self:center;font-size:26rpx;">
									{{fixSelectData['HHAD'][styledata.rq.keyArr[index]]}}
								</text>
							</view>
							<text v-if="fixSelectData['HHAD'][styledata.rq.keyArr[index]+'F']!=0" :style="fixSelectData['HHAD'][styledata.rq.keyArr[index]+'F']>0?'color:red;':'color:green;'">
								{{fixSelectData['HHAD'][styledata.rq.keyArr[index]+'F']>0?'↑':'↓'}}
							</text>
						</view>
					</view>
				</view>
				<view v-else class="check" style="flex: 1;">
					<view style="color: #999999;">
						未开售
					</view>
				</view>
			</view>
		</view>
		<view v-if="popupNumer==0" class="buttonbox" @click="openpopup">
			<text style="color: #999999;">混合</text>
			<text style="color: #999999;">选项</text>
		</view>
		<view v-if="popupNumer > 0" class="buttonbox" @click="openpopup" style="display: flex; flex-wrap: wrap;">
			<text style="color: #999999;">已选择
				<text style="color: #ff0000;">{{popupNumer}}</text>项
			</text>
		</view>
		<!-- 混合选项弹出层 -->
		<uni-popup ref="hhggpopup" type="bottom" >
			<hhggallcheck :fixSelectData="fixSelectData" :styledata="styledata" @closeupup="closeupup" @getfixSelectData="change"></hhggallcheck>
		</uni-popup>
	</view>

</template>

<script>
import hhggallcheck from "@/components/jczq/hhgg-checkupup.vue";
// import { mapState } from "vuex";

export default {
  components: { hhggallcheck },
  props: ['Refresh', 'fixSelectData'],
  emits: ['getSelectList'],
  data() {
    return {
      styledata: {},
      localtemporaryArr: '',
      popupNumer: 0,
      oneGameType: '',
      deleteId: this.fixSelectData.MatchId,
    };
  },

  watch: {
    Refresh(newval, oldval) {
      this.init();
    },
  },
  methods: {
    init() {
      this.localtemporaryArr = '';
      this.popupNumer = 0;
      // 字典
      let arr = {
        spf: {
          style: [0, 0, 0],
          res: ['胜', '平', '负'],
          keyArr: ['H', 'D', 'A'],
        },
        rq: {
          style: [0, 0, 0],
          res: ['让胜', '让平', '让负'],
          keyArr: ['H', 'D', 'A'],
        },
        jq: {
          style: [0, 0, 0, 0, 0, 0, 0, 0],
          res: ['0', '1', '2', '3', '4', '5', '6', '7+'],
          keyArr: ['S0', 'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7'],
        },
        bqc: {
          style: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          res: [
            '胜-胜', '胜-平', '胜-负',
            '平-胜', '平-平', '平-负',
            '负-胜', '负-平', '负-负',
          ],
          keyArr: [
            'HH', 'HD', 'HA',
            'DH', 'DD', 'DA',
            'AH', 'AD', 'AA',
          ],
        },
        bf: {
          style: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
          ],
          res: [
            '1:0', '2:0', '2:1', '3:0',
            '3:1', '3:2', '4:0', '4:1',
            '4:2', '5:0', '5:1', '5:2',
            '胜其它',
            '0:0', '1:1', '2:2', '3:3',
            '平其它',
            '0:1', '0:2', '1:2', '0:3',
            '1:3', '2:3', '0:4', '1:4',
            '2:4', '0:5', '1:5', '2:5',
            '负其它',
          ],
          keyArr: [
            'S01S00', 'S02S00', 'S02S01', 'S03S00',
            'S03S01', 'S03S02', 'S04S00', 'S04S01',
            'S04S02', 'S05S00', 'S05S01', 'S05S02',
            'S1SH',
            'S00S00', 'S01S01', 'S02S02', 'S03S03',
            'S1SD',
            'S00S01', 'S00S02', 'S01S02', 'S00S03',
            'S01S03', 'S02S03', 'S00S04', 'S01S04',
            'S02S04', 'S00S05', 'S01S05', 'S02S05',
            'S1SA',
          ],
        },
      };
      this.styledata = arr;
    },
    change(game, index, gameId) {

      let array = {
        awayTeamAbbName: this.fixSelectData.AwayTeamAbbName,
        homeTeamAbbName: this.fixSelectData.HomeTeamAbbName,
        matchId: this.fixSelectData.MatchId,
        leagueAbbName: this.fixSelectData.LeagueAbbName,
        matchNumStr: this.fixSelectData.MatchNum,
        gameDeadline: `${this.fixSelectData.MatchDate} ${this.fixSelectData.MatchTime}`,
        orderDeadline: '',
        sort: this.fixSelectData.shopSetExpiration,
        data: [{
          res: this.styledata[game].res[index],
          rate: this.fixSelectData[gameId][this.styledata[game].keyArr[index]],
          poolEs: Number(this.noshowdan(gameId)),
          gameState: game,
        }],
      };
      if (this.styledata[game].style[index] === 0) {
        this.styledata[game].style[index] = 1;
        if (this.localtemporaryArr === '') {
          let ojb = {
            gameData: array,
            selectBoole: true,
          };
          this.localtemporaryArr = ojb;
        } else {
          this.localtemporaryArr.selectBoole = true;
          let newOjd = {
            res: this.styledata[game].res[index],
            rate: this.fixSelectData[gameId][this.styledata[game].keyArr[index]],
            poolEs: Number(this.noshowdan(gameId)),
            gameState: game,
          };
          this.localtemporaryArr.gameData.data.push(newOjd);
        }
        if (game === 'rq') {
          this.localtemporaryArr.gameData.goal = this.fixSelectData.HHAD.GoalLine;
        }
        this.popupNumer++;
        this.$emit('getSelectList', this.localtemporaryArr);
      } else {
        this.styledata[game].style[index] = 0;
        if (this.localtemporaryArr.gameData.data.length === 1) {
          array.data = [];
          let ojb = {
            gameData: array,
            selectBoole: false,
          };
          this.oneGameType = '';
          this.localtemporaryArr = ojb;
        } else {
          let Delindex = this.localtemporaryArr.gameData.data.findIndex(item => item.res === this.styledata[game].res[index]);
          this.localtemporaryArr.gameData.data.splice(Delindex, 1);
          if (game === 'rq') {
            let isGoal = false;
            for (let i = 0; i < this.localtemporaryArr.gameData.data.length; i++) {
              let booleIndex = this.styledata.rq.res.indexOf(this.localtemporaryArr.gameData.data[i].res);
              if (booleIndex !== -1) {
                isGoal = true;
                break;
              }
            }
            if (!isGoal) {
              delete this.localtemporaryArr.gameData.goal;
            }
          }
        }
        this.popupNumer--;
        this.$emit('getSelectList', this.localtemporaryArr);
      }
    },
    noshowdan(id) {
      if (this.fixSelectData.PoolList[id] && this.fixSelectData.PoolList[id].BettingSingle === "1") {
        return true;
      }
      return false;
    },
    noshowgame(gameType) {
      if (this.fixSelectData.PoolList[gameType]) {
		  let had = this.fixSelectData[gameType]
		  if(had.A == 0 && had.D == 0 && had.H == 0){
			  return false;
		  }
        return true;
      }
      return false;
    },
    openpopup() {
      this.$refs.hhggpopup.open('bottom');
    },
    closeupup() {
      this.$refs.hhggpopup.close('bottom');
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
	.inner-box1 text {
		position: absolute;
		left: 25%;
		bottom: -2px;
		color: #fff;
		transform: translateX(-50%);
	}
	
	.inner-box1 {
	
		width: 50%;
		height: 50%;
		background-color: red;
		transform: rotate(-45deg);
		position: absolute;
		left: -15%;
		top: -15%;
	}
	
	.huadan {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100%;
		/* background-color: orange;    */
		overflow: hidden;
	}
	
	.check {
		flex:1;
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;



		/* 边框 */
		border: 3rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box {

		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;


	}

	text {
		font-size: 20rpx;
		text-align: center;
	}
	
	.button {
		height: 80rpx;
		width: 100%;
		color: #ff0000;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	
		/* 边框 */
		border: 3rpx solid #ff0000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.buttonbox {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius:10rpx;
		/* 边框 */
		border: 1rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.checkbox {

		flex: 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.yc-data-checkbox {
		margin: 5px;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		text-align: center;


	}
</style>